Hello and welcome him.
This show we are going to create the structure for our app using hastier mail.
All right.
I got my text said it opens.
I'm just going to switch to my blank lithium LFR.
It does see it there called in Deathstar hastier mill.
So the way this election is going to work I'm going to pre write the code and then I had it on and explain
what I have done.
I have just added some hastier more tags.
The very first line here the doc type is not actually part of this email document is called E Doc typed.
It said declaration.
The purpose of the doctype is to notify the web browsers or set changes that the document contains.
Hastier Mail 5 so this is main purpose.
The actual hastier mill documents starts from line 2 which is the opening tag and line 5 which is the
closing tags for every other content between these hastier mills or plain unclose in tag all comprise
of the content of the speech so we can all sob nest.
Other tags inside this.
A limit.
This hit home elements for gun nest child elements.
I have had shared a child element which is the head tag here.
Line 3 2 8.
So also notice I've indented properly so you can tell by looking at the code that the head element.
Here is a child of the hastier male and these tags here are children of the head tag.
So the head tag is merely for information purposes.
You don't actually see the content of the head tags.
They are there to provide information for these web browsers and for search engine purposes.
So we've got a title tag online for which basically display of the title of the page.
Then line 5 we've got email tar tag.
Inside of it it's got an attribute called Cast set with the value of utf that 8 so metal cast the car's
head.
It refers to the encoding type for this document the standard is utf 8 line number 6 of the code.
Gone are the Met a tag with a attribute of name and a value of viewport or saw another attribute called
content with a value of equal device minus a comma initial dash skill equals 1.
What line is 7 the same is that.
So what line 6 is saying is that this document can be viewed by any device regardless of the screen
size.
So you can have a small device like a cell phone or a big device like a big computer screen.
And also I've said initial skill to dash one that means of course one you can zoom.
The skill here now was you to zoom in and out line 7 is a reference to our external style sheet which
is here.
This town is here.
Thus a reference to the style -- I have added another child element which is the body score the content
of the body tag.
The body is down from line 10 and ends on line 26.
So this is the actual content that will be visible when they visit or close to this page.
Okay so only the content between the body tag is displayed live by the tag on line 11 there.
I have quite a head into now which is a hape one animal saw used some in line styling saw right down.
I am going to do some external time later but I've also embedded some in life lifestyle in here saw
line 11 gwadar HEY one tag which is ahead in intact and I've applied this path Toit given the colour
black.
Given the margin to the left of 395 pixels and the font which refers to the baldness.
So I'm giving it the value of bold and then the actual title detects they'll be displayed is image slide
that have inserted a couple of brake tags to create some space on line 12 13.
Lime 4 team 2 lane 21 is where we create a diff.
We could mmd one home for teemed quad wrap up and give me hope this will be the main day that will wrap
me the images so giving it to a style maximum of a thousand pixels and positron to be relative.
Okay and I've created a few image tags.
I mge tags and giving them a class off slice or they are or belong to the same class.
So when I'm doing this he says later these stylin will be applied to this in his class.
So we're the image class slides of all saw with it.
I am genito specified the look ition of the image.
So look I shall not be made to do that year in an attribute.
So this source attribute here is used to specify where the images come in from.
So the images come in from my images folder and thus the first image is second image third for dinosaur.
I have applied styling to the images to the weed to be a hundred percent of the parent container but
I will modify this slightly when we are doing our external stahl's -- on line 22 and 23.
I've created the class quad button one and put in to give me an eighth position of absolute And so from
the top 5 percent of the print container from the left.
Set it to series.
I've also trashed the event on Click event to event handler and what those will do.
I will look at times a function of great end of function on the wall should display this.
Show you how this was done in the javascript.
Later saw this what the from chool would do.
It check put in number else lied and respond accordingly.
Here in those botin he have greater this plan.
The reason I've put this pattern here is so that I can start this.
This entity this entity is used to create a less down and this is used to create equal.
Great idea.
Okay so the amp assign g t will create a greater downside beath up assign else you will create here
less than sign.
So we gonna use the great UNled does sign to switch between next and previous on the slide.
Boy I need to wrap them inside this band eidy so that I can start them property because you can start
them alone it's a bit difficult.
That's why I've wrapped them around a span eliminate the deep end here on line 24 line 25.
It's a reference tool.
Our script this script is javascript is always Bliz just before the close embody attack so that it doesn't
even wait for all the elements on the page to look before descript executes.
So let's see for our hastier mail for this project.
Thanks for watching and bye for now.
I'll just say that.
We came out with a quick look and see what it looks like.
So this is why they paid those like out of my mind.
Obviously the functionality is not in place so we can slide through the images at the moment but at
least we've got this Trock shot in place.